<template>
  <el-container>
    <el-header style="max-height: 35px">
      <el-form :inline="true">
        <el-form-item label="产品名称">
          <el-input v-model="productName" placeholder="产品名称"></el-input>
        </el-form-item>
        <el-form-item label="规格">
          <el-input v-model="specification" placeholder="规格"></el-input>
        </el-form-item>
        <el-form-item label="型号">
          <el-input v-model="version" placeholder="型号"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="test">查询</el-button>
        </el-form-item>
      </el-form>
    </el-header>
    <el-main>
      <el-table
        ref="multipleTable"
        :data="tableData"
        tooltip-effect="dark"
        style="width: 100%"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55"> </el-table-column>
        <el-table-column prop="productNumber" label="产品编号" show-overflow-tooltip> </el-table-column>
        <el-table-column prop="productName" label="产品名称" show-overflow-tooltip> </el-table-column>

        <el-table-column prop="specification" label="规格" show-overflow-tooltip> </el-table-column>
        <el-table-column prop="version" label="型号" show-overflow-tooltip> </el-table-column>
        <el-table-column prop="vender" label="生产厂家" show-overflow-tooltip> </el-table-column>
        <el-table-column prop="unit" label="单位" show-overflow-tooltip> </el-table-column>
      </el-table>
    </el-main>
    <el-footer style="margin: 0 auto">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[10, 15, 20, 25]"
        :page-size="paseSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </el-footer>
  </el-container>
</template>
<script>
import { getAction, postAction } from '@/api/manage'
export default {
  name: 'Home',
  data() {
    return {
      tableData: [],
      multipleSelection: [],
      currentPage: 1,
      paseSize: 10,
      productName: '',
      specification: '',
      version: '',
      total: 30,
    }
  },
  methods: {
    handleSizeChange(val) {
      this.paseSize = val;
      this.test();
      console.log(`每页 ${val} 条`)
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      this.test();
      console.log(`当前页: ${val}`)
    },
    /**全选 */
    toggleSelection(rows) {
      if (rows) {
        rows.forEach((row) => {
          this.$refs.multipleTable.toggleRowSelection(row)
        })
      } else {
        this.$refs.multipleTable.clearSelection()
      }
    },
    handleSelectionChange(val) {
      this.multipleSelection = val
    },
    test() {
      var url = '/pd-product/find_produce_info'
      getAction(url, {
        currentPage: this.currentPage,
        paseSize: this.paseSize,
        productName: this.productName,
        specification: this.specification,
        version: this.version,
      }).then((res) => {
        console.log(res.results)
         this.total = res.result["total"]
        this.tableData = res.result["value"]
      })
    },
  },
  created() {
    this.test()
  },
}
</script>

<style scoped>
el-header,
el-main,
el-footer {
  padding: 0;
}

el-table-column {
  max-height: 30px;
}
</style>